<template>


    
      <div class="app" v-if="P_show">
        <el-container class="common-layout">
          <el-aside :width="isCollapse ? '60px' : '200px'" class="aside-container">
            <div class="logo">
              <img class="img" :style="{ width: isCollapse ? '40px' : '60px', height: isCollapse ? '40px' : '60px' }"
                src="@/assets/logos.png" alt="logo">
            </div>
            <div class="menu">
              <div class="item" v-for="(o, i) in muenList" :key="i" :class="{
                active: _G.M.idx === i,
                'item-collapsed': isCollapse,
                'Sitem-collapsed': !isCollapse,
              }" @click="O_Muen(o, i)">
                <div class="svg" v-html="o.svg"></div>
                <div class="title">
                  {{ o.title }}
                </div>
              </div>
            </div>
            <div class="collapse-btn" @click="toggleCollapse">
              <el-icon>
                <component :is="isCollapse ? 'Expand' : 'Fold'" />
              </el-icon>
            </div>
          </el-aside>
          <el-container class="common-layout-mian">
            <el-header>
              <G_Head />
            </el-header>
            <el-main>
              <router-view></router-view>
            </el-main>
          </el-container>
        </el-container>
      </div>
      <div v-else class="login-tip">
        您还未登录，暂时无法使用
      </div>

  </template>
  <script setup>
  import { onMounted, ref } from "vue"
  import G_Head from "@cpmt/G_Head.vue"
  import P_store from "@store/login/index"
  import * as dd from 'dingtalk-jsapi'
  import muenList from "@utils/menu.js"
  import { defineStore, storeToRefs } from 'pinia'
  const _G = defineStore('main', {})()
  
  const P = P_store()
  
  const { P_show, R } = storeToRefs(P)
  const isCollapse = ref(true)
  
  const toggleCollapse = () => {
    isCollapse.value = !isCollapse.value
  }





  const O_Muen = (o, i) => {
    console.log('点击菜单', o, i)
    _G.M.Push({
      title: o.title,
      url: o.url,
      idx: i
    })
  }
  
  
 
  
  
  </script>
  
  <style lang="less">
  .app {
    position: relative;
  
    .aside-container {
      transition: width 0.3s;
      position: relative;
      background-color: #fff;
      border-right: 1px solid #dcdfe6;
  
  
      .logo {
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
  
        .img {
          object-fit: contain;
          transition: all 0.3s;
        }
      }
  
      .menu {
        height: calc(100vh - 96px);
        overflow-y: auto;
        overflow-x: hidden;
  
        .item {
          padding: 4px 0;
          display: flex;
          align-items: center;
          cursor: pointer;
          transition: all 0.3s;
          margin: 8px 4px;
          border-radius: 4px;
  
          &.item-collapsed {
            flex-direction: column;
  
            .title {
              margin-left: 0;
              margin-top: 4px;
              font-size: 12px;
            }
          }
  
          &.Sitem-collapsed {
            flex-direction: row;
            justify-content: flex-start;
            padding: 12px;
  
            .title {
              margin-left: 10px;
              font-size: 14px;
            }
          }
  
  
          .svg {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
  
          .title {
            // margin-left: 10px;
            font-size: 10px;
            transition: opacity 0.3s;
            white-space: nowrap;
  
  
          }
  
          &:hover {
            background-color: #f0f6ff;
            color: #7ea9e9;
          }
  
          &.active {
            background-color: #89b1ec;
            color: #ffffff;
          }
        }
      }
  
      .collapse-btn {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 50%;
        background-color: #f5f7fa;
        transition: all 0.3s;
  
        &:hover {
          background-color: #e4e7ed;
        }
      }
    }
  
  }
  
  
  
  
  .common-layout {
  
    .el-header,
    .el-main {
      padding: 0;
    }
  }
  
  .login-tip {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #909399;
    font-weight: 500;
    text-align: center;
    padding: 30px;
    border-radius: 8px;
    background-color: #f5f7fa;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  </style>